<template>
	<view class="contina w">
		<view class="title flex_a_c">
			<image src="../../static/image/lgoo.png"></image>
			<view class="text">
				<view class="t">云阔通建</view>
				<view class="e">Yunkuo For Build</view>
			</view>
		</view>
		<view class="navTit">
			开通建筑业企业信息化管理服务
		</view>
		<view class="cards">
			<view class="tip">请选择需要续费的周期</view>
			<template v-for="(item,idx) in list">
				<view class="pay_item card" :class="cuIndex == idx ? 'acPrice': ''" @click="cIndex(idx)">
					<view class="tit">{{item.title}}</view>
					<view class="price" style="">
						<view class="un">¥</view>
						<view class="num">
							{{item.price}}
						</view>
						<view class="ti">
							/{{item.duration}}
						</view>
					</view>
				</view>
			</template>
			<view class="payBtn" @click="pay">
				立即开通（¥{{c_price}}）
			</view>
			<view class="vipTip">专属特权</view>
			<view class="vipList">
				<template v-for="item in vipList">
					<view class="vipRoot">
						<image :src="item.img"></image>
						<view class="text">
							{{item.text}}
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="card ph">
			<image class="ic" src="../../static/image/lgoo.png"></image>
			<view class="cen">
				<view class="t1">没有您想要的服务？</view>
				<view class="t2">添加专属客服 了解更多服务</view>
			</view>
			<view class="zx">
				<view class="">立即</view>
				<view class="">咨询</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" :closeable="true" mode="bottom" :closeOnClickOverlay="true" :round="10">
			<view class="content_pop">
				<view class="tip">支付金额</view>
				<view class="price">
					<text>¥</text>
					<text style="font-size: 38rpx;margin-left: 10rpx;">{{c_price}}</text>
				</view>
				<u-radio-group v-model="raoVal" :borderBottom="true" placement="column" iconPlacement="right">
					<view style="display: flex;">
						<image src="../../static/image/wxPay.png" style="width: 60rpx;height: 50rpx;"></image>
						<u-radio :customStyle="{marginBottom: '16px',width: 'calc(100% - 80rpx)',marginLeft:'20rpx'}"
							label="微信支付" name="1"></u-radio>
					</view>
					<view style="display: flex;">
						<image src="../../static/image/zfbpay.png" style="width: 60rpx;height: 60rpx;"></image>
						<u-radio :customStyle="{marginBottom: '16px',width: 'calc(100% - 80rpx)',marginLeft:'20rpx'}"
							label="支付宝支付" name="2"></u-radio>
					</view>
				</u-radio-group>
				<view class="payBtn" @click="confim">
					确认支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cuIndex: 0,
				show: false,
				raoVal: "1",
				vipList: [{
					img: "../../static/image/money.png",
					text: "资质管理"
				}, {
					img: "../../static/image/money.png",
					text: "证书管理"
				}, {
					img: "../../static/image/money.png",
					text: "项目管理"
				}, {
					img: "../../static/image/money.png",
					text: "投标管理"
				}, {
					img: "../../static/image/money.png",
					text: "业绩管理"
				}, {
					img: "../../static/image/money.png",
					text: "到期提醒"
				}],
				list: [],
				c_price: '',
				product_id: 0,
				corp_id: 0,
			};
		},
		onLoad(option) {
			this.corp_id = option.id
		},
		created() {
			this.$api.corpPayApi.product().then(res => {
				this.list = res;
				this.c_price = this.list[0].price.toFixed(2)
				this.product_id = this.list[0].id
			})
		},
		methods: {
			cIndex(idx) {
				this.cuIndex = idx;
				this.c_price = this.list[idx].price.toFixed(2)
				this.product_id = this.list[idx].id
			},
			close() {
				this.show = false;
			},
			pay() {
				this.show = true;
			},
			async confim() {
				uni.showLoading({
					title: '请求中...',
					mask: true
				})

				let res = await this.$api.corpPayApi.payParam({
					type: this.raoVal,
					app_type: 'APP',
					product_id: this.product_id,
					corp_id: this.corp_id,
				})
				if (this.raoVal == 1) {
					let orderInfo = {
						"appid": res.appId,
						"partnerid": res.partnerId,
						"prepayid": res.prepayId,
						"package": res.package,
						"noncestr": res.nonceStr,
						"timestamp": res.timeStamp,
						"sign": res.sign,
					}
					let that = this
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: orderInfo,
						success(e) {
							that.$fun.$fun.tipTopage('支付成功', "/pagesB/paySuccess/paySuccess")
						},
						fail(e) {}
					})
				} else {
					let that = this
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.param,
						success: function(res) {
							that.$fun.$fun.tipTopage('支付成功', "/pagesB/paySuccess/paySuccess")
						},
						fail: function(e) {
							// console.log(e,res)
							// that.debug_msg = JSON.stringify({
							// 	err: e,
							// 	res: res,
							// })
						}
					});
				}
				try {} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.contina {
		background-image: linear-gradient(#CCE0FC, #FCFCFD);
		padding-top: 40rpx;

		.title {
			image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
			}

			.text {
				margin-left: 10rpx;

				.t {
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #3D3D3D;
				}

				.e {
					font-size: 16rpx;
					font-weight: 400;
					color: #3D3D3D;
				}
			}
		}

		.navTit {
			font-size: 48rpx;
			font-weight: 400;
			color: #3D3D3D;
			margin-top: 40rpx;
		}

		.cards {
			background: linear-gradient(180deg, #FAF9FB 0%, #FEFEFE 98%);
			box-shadow: 0px 4px 10px 0px #E7EEFD;
			border-radius: 20rpx;
			border: 1px solid #FFFFFF;
			margin-top: 46rpx;
			padding: 30rpx;

			.tip {
				font-size: 24rpx;
				font-weight: 400;
				color: #858585;
			}

			.acPrice {
				border: 1px solid #E0A160 !important;
			}

			.pay_item {
				padding: 40rpx !important;
				background: #FEFDFA;
				border-radius: 7px 7px 7px 7px;
				border: 1px solid #F8EBDA;
				box-sizing: border-box;

				.tit {
					font-size: 32rpx;
					font-weight: 400;
					color: #6A3B11;
				}



				.price {
					color: #DF9E5C;
					display: flex;
					align-items: flex-end;
					margin-top: 30rpx;

					.un {
						font-size: 28rpx;
					}

					.num {
						font-size: 38rpx;
						margin-left: 10rpx;
						font-weight: 500;
					}

					.ti {
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}
			}

			.payBtn {
				width: 570rpx;
				height: 96rpx;
				background: #0074FF;
				border-radius: 50px 50px 50px 50px;
				text-align: center;
				font-size: 32rpx;
				line-height: 96rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: 60rpx auto 0;
			}

			.vipTip {
				font-size: 32rpx;
				font-weight: 400;
				color: #000000;
				margin-top: 50rpx;
			}

			.vipList {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				justify-content: space-between;

				.vipRoot {
					margin-top: 30rpx;
					text-align: center;

					image {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
					}

					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #3D3D3D;
					}
				}
			}
		}

		.ph {
			width: 100%;
			margin-top: 20rpx;
			box-shadow: 0px 4px 10px 0px #E7EEFD;
			display: flex;

			.ic {
				width: 100rpx;
				height: 100rpx;
				background: #E7EEFD;
				border-radius: 5px 5px 5px 5px;
			}

			.cen {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.t1 {
					font-size: 32rpx;
					font-weight: 400;
					color: #000000;
				}

				.t2 {
					font-size: 28rpx;
					font-weight: 400;
					color: #3D3D3D;
				}
			}

			.zx {
				width: 50px;
				height: 50px;
				background: #0074FF;
				color: #fff;
				border-radius: 50%;
				font-size: 28rpx;
				font-weight: 400;
				margin-left: auto;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.content_pop {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 90rpx;

			::v-deep .u-radio-group {
				width: 90%;
				margin-top: 60rpx;
			}

			.tip {
				font-size: 28rpx;
				font-weight: 400;
				color: #3D3D3D;
				margin-bottom: 20rpx;
			}

			.price {
				font-size: 28rpx;
				font-weight: 400;
				color: #3D3D3D;
			}

			::v-deep .u-icon__icon {
				color: #ffffff !important;
			}

			.payBtn {
				width: 690rpx;
				height: 96rpx;
				background: #0074FF;
				border-radius: 50px 50px 50px 50px;
				text-align: center;
				line-height: 96rpx;
				color: #fff;
				margin-top: 40rpx;
			}
		}
	}
</style>